<template>
  <div class="settings">
    <van-nav-bar
      fixed
      safe-area-inset-top
      title="权限设置"
      left-text="返回"
      left-arrow
      @click-left="$router.push({ name: 'personal' })"
    />
    <div class="settings-itemBox">
      <div v-for="(item, id) of settings" :key="id" class="item">
        <div class="item-title">
          {{ item.desc }}
        </div>
        <div class="item-value">
          <van-switch
            v-model="item.enabled"
            :loading="!!item.loading"
            @change="toggleSwitchEvent($event, item)"
            class="itemSwitch"
            size="18"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import {
  Cell,
  CellGroup,
  Icon,
  Button,
  Dialog,
  Field,
  Notify,
  Switch,
  Loading,
} from "vant";
import _ from "lodash";

Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Icon);
Vue.use(Button);
Vue.use(Dialog);
Vue.use(Field);
Vue.use(Notify);
Vue.use(Switch);
Vue.use(Loading);

export default {
  data() {
    return {
      settings: [],
      toSetDefaultLaunchAppList: [],
      setDefaultLaunchAppDialogShown: false,
      setDefaultLaunchAppLoading: false,
    };
  },
  props: {
    statusBarHeight: Number,
  },
  async mounted() {
    let settings = await AutoWeb.autoPromise("getSettings");
    settings.forEach((item) => {
      item.loading = false;
    });
    this.settings = settings;
  },
  computed: {},
  methods: {
    async toggleSwitchEvent(e, item) {
      item.loading = true;
      let result = await AutoWeb.autoPromise("saveSetting", item);
      item.loading = false;
      if (!result) {
        item.enabled = !item.enabled;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.settings {
  .settings-itemBox {
    margin: 56px 10px 0;
    .item:active {
      background-color: #f2f3f5;
    }
    .item {
      height: 44px;
      margin: 5px 10px 5px 10px;
      border-radius: 10px;
      background-color: #fff;
      overflow: hidden;
      padding: 0px 16px;
      font-size: 14px;
      box-shadow: 4px 4px 8px #aaa;
    }
    .item-title {
      display: inline-block;
      height: 44px;
      line-height: 44px;
    }
    .item-value {
      margin-top: 12px;
      float: right;
    }
  }
}
</style>